<template>
  <div class="dashboard-container">
    <!-- 模块标题 -->
    <h2 class="panel-title">设备控制面板</h2>

    <!-- 主体内容 -->
    <el-row>
      <!-- 左侧状态矩阵 -->
      <el-col>
        <div class="status-matrix">
          <div class="matrix-header grid-container">
            <div class="header-item">运动轴</div>
            <div class="header-item param-header">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="dropdown-trigger">
                  {{ currentParam.label }}
                  <el-icon class="arrow"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-for="param in paramOptions"
                      :key="param.value"
                      :command="param.value"
                      :class="{ selected: param.value === currentParam.value }"
                    >
                      {{ param.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="header-item">当前位置</div>
            <div class="header-item">运行模式</div>
          </div>

          <div class="matrix-content">
            <div v-for="(row, index) in axisData" :key="index" class="grid-container">
              <div class="cell">{{ row.axis }}</div>
              <div class="cell param-value">
                {{ row[currentParam.value] || '-' }}
              </div>
              <div class="cell">{{ row.position }}</div>
              <div class="cell">
                <el-tag :type="modeTagType[row.mode]">{{ row.mode }}</el-tag>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧指示灯 -->
      <el-col>
        <div class="horizontal-indicator">
          <h3 class="inline-title">货叉模式指示灯：</h3>
          <div class="indicator-group">
            <div class="led-container">
              <div
                v-for="n in 2"
                :key="n"
                class="led"
                :class="{
                  'active-blue': n === 1 && isSingleFork,
                  'active-orange': n === 2 && !isSingleFork,
                }"
              ></div>
            </div>
            <span class="status-label">
              {{ isSingleFork ? '单货叉模式' : '双货叉模式' }}
            </span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 速度曲线图 -->
    <div class="chart-container">
      <h3 class="sub-title">三轴速度协同曲线</h3>
      <div id="speed-chart" style="height: 30vh"></div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import {
    ElRow,
    ElCol,
    ElTag,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElIcon,
  } from 'element-plus';
  import { ArrowDown } from '@element-plus/icons-vue';
  import * as echarts from 'echarts';

  // 参数配置
  const paramOptions = [
    { value: 'speed', label: '实时速度' },
    { value: 'acceleration', label: '加速度' },
    { value: 'deceleration', label: '减速度' },
  ];
  const currentParam = ref(paramOptions[0]);
  const handleCommand = (command) => {
    currentParam.value = paramOptions.find((p) => p.value === command);
  };

  // 运动轴数据
  const axisData = ref([
    {
      axis: 'X轴水平',
      speed: '1.2m/s',
      acceleration: '0.5m/s²',
      deceleration: '0.3m/s²',
      position: '(X=1200,Y=300)',
      mode: '自动',
    },
    {
      axis: 'Y轴提升',
      speed: '0.8m/s',
      acceleration: '0.4m/s²',
      deceleration: '0.2m/s²',
      position: 'Z=2层',
      mode: '维修模式',
    },
    {
      axis: 'Z轴换层',
      speed: '0.6m/s',
      acceleration: '0.3m/s²',
      deceleration: '0.15m/s²',
      position: '高度3.2m',
      mode: '自动',
    },
  ]);

  // 运行模式标签样式
  const modeTagType = {
    自动: 'success',
    维修模式: 'warning',
  };

  // 货叉指示灯
  const isSingleFork = ref(true);

  // 图表初始化
  let chartInstance = null;
  onMounted(() => {
    chartInstance = echarts.init(document.getElementById('speed-chart'));
    const option = {
      xAxis: {
        type: 'category',
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
        axisLabel: { color: '#fff' },
      },
      yAxis: {
        type: 'value',
        name: '速度 (m/s)',
        axisLabel: { color: '#fff' },
      },
      series: [
        { name: 'X轴', type: 'line', smooth: true, data: [0, 1.2, 0.8, 1.5, 1.0, 0.5] },
        { name: 'Y轴', type: 'line', smooth: true, data: [0, 0.8, 1.0, 0.6, 1.2, 0.9] },
        { name: 'Z轴', type: 'line', smooth: true, data: [0, 0.5, 0.9, 1.2, 0.7, 1.0] },
      ],
      tooltip: { trigger: 'axis' },
      legend: {
        top: 'bottom',
        textStyle: { color: '#fff' },
        itemGap: 20,
      },
      grid: {
        containLabel: true,
        top: '10%',
        bottom: '20%',
        backgroundColor: 'rgba(255,255,255,0.1)',
      },
      backgroundColor: 'rgba(0,0,0,0.3)',
    };
    chartInstance.setOption(option);

    window.addEventListener('resize', () => chartInstance.resize());
  });
</script>

<style scoped>
  .dashboard-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    color: white;
    height: 90vh;
    overflow-y: auto;
  }

  .panel-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: left;
  }

  .status-matrix {
    background: rgba(0, 46, 93, 0.6);
    border-radius: 12px;
    padding: 15px;
    margin-right: 20px;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.5fr 1.2fr;
    gap: 15px;
    padding: 10px 0;
    align-items: center;
  }

  .matrix-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
  }

  .param-header {
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    &:hover {
      color: #409eff;
      .arrow {
        transform: rotate(180deg);
      }
    }
  }

  .dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .arrow {
    transition: transform 0.3s;
    font-size: 14px;
  }

  .param-value {
    color: #67c23a;
    font-weight: 500;
    font-size: 0.8vw;
  }

  .horizontal-indicator {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
  }

  .inline-title {
    margin: 0;
    font-size: 1.1rem;
    white-space: nowrap;
  }

  .indicator-group {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 25px;
  }

  .led-container {
    display: flex;
    gap: 12px;
  }

  .led {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #606266;
    transition: all 0.3s;
  }

  .active-blue {
    background: #409eff;
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.6);
  }

  .active-orange {
    background: #47bf26;
    box-shadow: 0 0 10px rgba(71, 191, 38, 0.6);
  }

  .status-label {
    color: #e6e6e6;
    font-size: 0.95rem;
  }

  .chart-container {
    background: rgba(138, 139, 142, 0.5);
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
  }

  .sub-title {
    font-size: 1.1rem;
    margin: 15px 0;
  }

  /* 下拉菜单样式覆盖 */
  :deep(.el-dropdown-menu) {
    background: rgba(0, 46, 93, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  :deep(.el-dropdown-menu__item) {
    color: #fff !important;
    &:hover {
      background: rgba(255, 255, 255, 0.1) !important;
    }
    &.selected {
      color: #409eff !important;
      background: rgba(64, 158, 255, 0.1) !important;
    }
  }
</style>
